<template>
  <div id="footer">
        <div id="footer-one">
               <img src='~@/assets/foot1.jpg' style="width:90%;" >
        </div>
        <div id="footer-two">
                <div id="footer-two-left">
                 <img src='~@/assets/花果山2.jpg' style="width:90%;" >
                </div>
                 <div id="footer-two-right">
                   <ul>
                     <li  id='chu'>新手指南</li>
                     <li id='zhen'><a href="">购物流程</a></li>
                     <li id='zhen'><a href="">账户注册</a></li>
                     <li id='zhen'><a href="">会员积分</a></li>
                     <li id='zhen'><a href="">联系客服</a></li>
                   </ul>
                    <ul>
                     <li id='chu'>付款方式</li>
                     <li id='zhen'><a href="">在线支付</a></li>
                     </ul>
                      <ul>
                     <li  id='chu'>配送服务</li>
                     <li id='zhen'><a href="">配送运费</a></li>
                     <li id='zhen'><a href="">配送范围</a></li>
                     <li id='zhen'><a href="">配送时间</a></li>
                     <li id='zhen'><a href="">配送须知</a></li>
                   </ul>
                    <ul>
                     <li  id='chu'>售后服务</li>
                     <li id='zhen'><a href="">关于商品的退换</a></li>
                     <li id='zhen'><a href="">关于退换的处理</a></li>
                     <li id='zhen'><a href="">关于退款</a></li>
                   </ul>
                </div>
        </div>
        <div id="footer-three">
          Copyright ©2020 花果山 huaguoshan.com All Rights Reserved　 |　东莞理工学院  | 17网络工程4班
        </div>
        <div id="footer-four">
        </div>

  </div>
</template>

<style scoped>
#footer {
  height: 400px;
  /* background: rgb(122, 101, 101); */
   margin-top: 6px;
   width: 1515px;
  position: absolute;
}
#footer-one{
  width: 85%;
  height: 20%;
  margin-left:12%;
  margin-top:2%;

}
#footer-two{
  width: 82%;
  height: 50%;
  margin-left:10%;
  margin-top:2%;
   background: #9e9e9e15;
 position: absolute;
 box-shadow: 2px 2px 2px gainsboro;
}
#footer-two-left{
  float:left;
  height: 350px;
  margin-top: 40px;
  margin-left: 40px;
  width: 280px;

}
#footer-two-right{
  width: 780px;
  float:left;
}
ul{list-style: none;float: left;
margin-left:45px;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}
li{padding: 5px;}
#chu{font-size: 20px;font-weight: 700;color: rgb(78, 76, 76);}
li a{text-decoration: none;color: rgb(105, 101, 101);font-size: 10px}
li a:hover{
  color:rgb(17, 236, 90);
  text-decoration: underline;
}

#footer-three{
  position: relative;
  background: rgba(68, 66, 66, 0.267);
  height: 35px;
  padding: 5px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 15px;
  text-align: center;line-height: 35px;
 margin-top:240px;
}
</style>
